<template>
  <div>
    <input ref="uploadInput" type="file" id="file" accept="image/*">


    <compressor-upload ref="cUpload" class="my-upload" :action="action" :option="{quality: 0.6}"
                       :on-success="onSuccess">
      点我上传
    </compressor-upload>


    <br>
    <br>
    <br>
    <img v-show="oImg.url" :src="oImg.url" alt=""><span v-show="oImg.size">{{ change(oImg.size) }}</span>
    <br>
    <br>
    <br>
    <img v-show="nImg.url" :src="nImg.url" alt=""><span v-show="oImg.size">{{ change(nImg.size) }}</span>
  </div>
</template>

<script>
import Compressor from 'compressorjs';
import compressorUpload from '@/components/compressor-upload'

export default {
  name: "Compressor",
  components: {compressorUpload},
  data() {
    return {
      oImg: {},
      nImg: {},
    }
  },
  computed: {
    action() {
      return 'http://10.60.1.226:3000' + '/uploadImage'
    }
  },
  methods: {
    a(e) {
      console.log('successsss', e)
    },
    blobToBase64(blob, callback) {
      let r = new FileReader();
      r.onload = function (e) {
        if (typeof callback === 'function') {
          callback(e.target.result);
        } else {
          console.log("我是 base64: ", e.target.result);
        }
      }
      r.readAsDataURL(blob);
    },
    change(limit) {
      let size = "";
      if (limit < 1 * 1024) {                            //小于1KB，则转化成B
        size = limit.toFixed(2) + "B"
      } else if (limit < 1 * 1024 * 1024) {            //小于1MB，则转化成KB
        size = (limit / 1024).toFixed(2) + "KB"
      } else if (limit < 1 * 1024 * 1024 * 1024) {        //小于1GB，则转化成MB
        size = (limit / (1024 * 1024)).toFixed(2) + "MB"
      } else {                                            //其他转化成GB
        size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB"
      }
      let sizeStr = size + "";                        //转成字符串
      let index = sizeStr.indexOf(".");                    //获取小数点处的索引
      let dou = sizeStr.substr(index + 1, 2)            //获取小数点后两位的值
      if (dou == "00") {                                //判断后两位是否为00，如果是则删除00
        return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
      }
      return size;
    },

    onSuccess(res, file, fileList) {
      console.log(res)
      console.log(file)
      console.log(fileList)
    },
  },
  mounted() {
    console.log('-----cUpload', this.$refs.cUpload)

    const input = this.$refs.uploadInput
    input.addEventListener('change', (e) => {
      const file = e.target.files[0];
      this.oImg = {
        url: URL.createObjectURL(file),
        size: file.size
      }
      if (!file) {
        return;
      }
      console.log(file)
      new Compressor(file, {
        quality: 0,
        // maxWidth: 300,
        // The compression process is asynchronous,
        // which means you have to access the `result` in the `success` hook function.
        success: (result) => {
          console.log('success', result)
          this.nImg.size = result.size
          this.blobToBase64(result, (e) => {
            this.nImg.url = e
            this.$forceUpdate()
          })
        },
        error: (err) => {
          console.log(err.message);
        },
      });
    });
  }
}
</script>

<style scoped>
img {
  max-width: 80vw;
}

/*.my-upload {*/
/*  color: red;*/
/*}*/
</style>
